<template>
  <div id="my-chart" style="width: 100%; height: 70vh"></div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import * as echarts from 'echarts'
import AnHuiJson from '@/assets/json/anhui.json'

import { data } from './config'

onMounted(() => {
  init()
})

let myChart: any
let options: Record<string, any> = {}

const init = () => {
  echarts.registerMap('AnHuiJson', AnHuiJson as any)
  myChart = echarts.init(document.getElementById('my-chart') as HTMLElement)
  const itemStyle = {
    normal: {
      borderColor: '#2980b9',
      borderWidth: 1,
      areaColor: '#12235c'
    },
    // 鼠标移动地图时的背景颜色
    emphasis: {
      disabled: true,
      areaColor: '#4B7902',
      label: {
        show: true,
        textStyle: {
          color: '#fff' //鼠标经过字体颜色
        }
      }
    }
  }

  const geoCoordMap: Record<string, Array<number>> = {
    宿州市政府: [116.97083, 33.653358]
  }

  const layoutCenter = ['45%', '50%']
  const layoutSize = '94%'

  const convertData = function (data: any[]) {
    var res = []
    for (var i = 0; i < data.length; i++) {
      var geoCoord = geoCoordMap[data[i].name]
      if (geoCoord) {
        res.push(geoCoord.concat(data[i].value).concat(data[i].name))
      }
    }
    return res
  }
  options = {
    title: {
      top: 20,
      text: '',
      subtext: '',
      x: 'center',
      textStyle: {
        color: '#ffffff'
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: function (params: Record<string, any>) {
        if (typeof params.value[2] === 'undefined') {
          return params.name + ' : ' + params.value
        } else {
          return params.name + ' : ' + params.value[2]
        }
      }
    },
    visualMap: {
      show: false,
      max: 100,
      seriesIndex: [3],
      inRange: {
        color: ['#A5DCF4', '#006edd']
      }
    },
    geo: {
      map: 'AnHuiJson',
      // 地图缩放
      zoom: 1.1,
      layoutCenter,
      layoutSize,
      itemStyle
    },
    series: [
      //地图
      {
        type: 'map',
        mapType: 'AnHuiJson',
        // geoIndex: -1,
        zoom: 1.1, //默认显示级别
        layoutCenter,
        layoutSize,
        // 鼠标经过，字体颜色修改  emphasis： show: true 与 itemStyle 联合
        label: {
          show: true,
          // 地图 默认 字体颜色
          color: '#ffffff',
          emphasis: {
            show: true
          }
        },
        itemStyle,
        data: data,
        selectedMode: false // 去除地图点击后的黄色背景颜色
      },
      // 标记点
      {
        name: '宿州市政府',
        type: 'scatter',
        coordinateSystem: 'geo',
        data: convertData([{ name: '宿州市政府' }]),
        encode: {
          value: 2
        },
        symbolSize: 12,
        label: {
          normal: {
            show: false, //显示市区标签
            textStyle: { color: '#c71585' } //省份标签字体颜色
          },
          emphasis: {
            //对应的鼠标悬浮效果
            show: true, //关闭文字 （这东西有问题得关）
            textStyle: { color: '#800080' }
          }
        },
        itemStyle: {
          normal: {
            borderWidth: 0.5, //区域边框宽度
            borderColor: '#009fe8', //区域边框颜色
            areaColor: '#ffefd5' //区域颜色
          },
          emphasis: {
            show: true,
            borderWidth: 0.5,
            borderColor: '#4b0082',
            areaColor: '#f47920'
          }
        },
        tooltip: {
          show: true,
          formatter: (params: Record<string, any>) => {
            return params.seriesName
          }
        }
      }
    ]
  }

  if (options && typeof options === 'object') {
    myChart.setOption(options)
  }

  window.addEventListener('resize', resize)
}

const resize = () => {
  setTimeout(() => {
    myChart && myChart.resize()
  }, 50)
}

defineOptions({
  name: 'CMap'
})
</script>

<style scoped></style>
